<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="./css/base.css"/>
		<link href="css/icons-extra.css" rel="stylesheet"/>
	</head>

	<body>
		<!-- 底部导航 -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="javascript:;" data-id="hotFilm">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<!-- <a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">消息</span>
			</a> -->
			
			<a class="mui-tab-item" href="javascript:;" data-id="ranking">
				<span class="mui-icon mui-icon-extra mui-icon-extra-rank"></span>
				<span class="mui-tab-label">榜单</span>
			</a>
			<!-- <a>
				<span class="mui-icon-extra mui-icon-extra-rank"></span>
			</a> -->
			<a class="mui-tab-item" href="javascript:;" data-id="setting">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			//页面窗口开法
			mui.plusReady(function () {//监听设备的启动加载完毕
			    //使用 plus对象（h5+的一个内部对象）
				let parentView = plus.webview.currentWebview()//父窗口、当前窗口
				//添加三个主页面的窗口
				let subPages = [
					{
						url:'pages/index.html',
						id:'hotFilm'
					},
					{
						url:'pages/search.html',
						id:'ranking'
					},
					{
						url:'pages/setting.html',
						id:'setting'
					}
				]
				
				// plus.webview.create('pages/index.html','hotFilm',{top:0,bottom:50px})
				
				// plus.webview.create('pages/search.html','ranking',{top:0,bottom:50px})
				
				// plus.webview.create('pages/setting.html','setting',{top:0,bottom:50px})
				
				let child;
				for(let i = 0;i<subPages.length;i++){
					child = plus.webview.create(subPages[i].url,subPages[i].id,{top:0,bottom:'50px'});
					// 对3个子窗口先进行设置（第2个、3个子窗口进行隐藏）
					if(i>0){
						// 循环第2次、第3次
						child.hide();
					}
					parentView.append(child)
				}
				
				mui('.mui-bar-tab').on('tap','.mui-tab-item',function(){
					// console.log(JSON.stringify(mui(this)))
					// console.log(this.getAttribute('data-id'))
					let tabId = this.getAttribute('data-id')//获取当前窗口
					
					// 记录当前窗口默认主页微当前出啊港口口
					let currTab = subPages[0];
					//显示新窗口（目标窗口）
					plus.webview.show(tabId,'fade-in',600)
					
					// plus.webview.hide(curr)
					
				})
				
			})
		</script>
	</body>

</html>
